// pages/feedback/feedback.js

/**
 * 1 点击 + 触发tap点击事件
 *  1 调用小程序内置的 选择图片的 api
 *  2 获取到 图片的路径 数组
 *  3 把图片路径 存到 data的变量中
 *  4 页面就可以根据 图片数组 进行循环显示 自定义组件
 */

/**
 * 2 点击提交
 *  1 获取文本域的内容
 *  2 对这些内容 合法性验证
 *  3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
 *  4 文本域 和 外网的图片的路径 一起提交到服务器 （此处前端的模拟 不会发送请求到后台）
 *  5 清空当前页面
 *  6 返回上一页
 */

Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs: [{
                id: 0,
                value: '体验问题',
                isActive: true
            },
            {
                id: 1,
                value: '商品、商家投诉',
                isActive: false
            }
        ],
        upImgList: [],
        textVal: ''
    },
    // tabs组件的点击函数
    handleTabsItemChange(e) {
        // console.log(e);
        // 1，获取子组件传过来的index值
        const { index } = e.detail
            // 2，修改原tabs数组
        let { tabs } = this.data
        tabs.forEach((v, i) => {
            if (i === index) {
                v.isActive = true
            } else {
                v.isActive = false
            }
        });

        this.setData({
            tabs: tabs
        })

    },

    // 添加图片
    handleChooseImg() {
        const that = this
        wx.chooseImage({
            count: 9,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: (result) => {
                console.log(result);
                const { tempFilePaths } = result
                const upImgList = that.data.upImgList

                upImgList.push(...tempFilePaths)
                that.setData({
                    upImgList
                })
            },
            fail: () => {},
            complete: () => {}
        });
    },

    // 点击删除要上传的图片
    handleDeleteImg(e) {

        const { index } = e.currentTarget.dataset
        const { upImgList } = this.data

        upImgList.splice(index, 1)

        this.setData({
            upImgList
        })
    },

    // 获取文本框值
    handleTextInput(e) {
        // console.log(e);
        const { value } = e.detail
        this.setData({
            textVal: value
        })
    },

    // 提交按钮
    handleFormSubmit() {

        const { textVal, upImgList } = this.data

        if (!textVal.trim()) {
            wx.showToast({
                title: '输入不合法',
                icon: 'none'
            });
            return
        }

        if (upImgList.length !== 0) {

            wx.showLoading({
                title: '图片上传中',
                mask: true
            });
            // 以下上传是模拟演示
            upImgList.forEach((v, i) => {
                    wx.uploadFile({
                        url: 'http://images.ac.cn/api/upload',
                        filePath: v,
                        name: 'file',
                        formData: {},
                        success: (result) => {
                            console.log(result);
                        },
                        fail: (err) => {
                            console.log(err);
                        },
                        complete: () => {}
                    });
                })
                // 假设以上上传成功，获取一个外网的图片链接
            const testUrl = 'https://ae01.alicdn.com/kf/H98c6bac457744e849a37da3abcde9345h.png'

            wx.hideLoading();
        }

        // 重置页面
        this.setData({
                textVal: '',
                chooseImage: []
            })
            // 返回上一个页面
        wx.navigateBack({
            delta: 1
        });
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }
})